<template>
    <div class="app-container">
        <!-- <TreatmentAppointmentBatch /> -->
        <AppHead @change="changeCurrentRow" @changeItemList="changeItemList" @changeForm="changeForm"
            :active-row="activeRow" :activeRow2="activeRow2" @getCheckList="getCheckList" :checkList="checkList"
            :count="count" :str="str" :selectKeys="selectKeys" />
        <el-row :gutter="15" type="flex">
            <el-col :span="10">
                <AppLeft class="AppLeft" ref="appLeft" :active-row="activeRow" @change="changeCurrentRow"
                    @changeItemList="changeItemList" />
            </el-col>
            <el-col :span="14" style="height: 500px;">
                <AppItem class="AppItem" ref="appItem" :active-row="activeRow" :activeRow2="activeRow2"
                    @change2="changeCurrentRow2" />
                <AppRight class="AppRight" :active-row="activeRow" :activeRow2="activeRow2"
                    @setSelectKeys="setSelectKeys" />
            </el-col>
        </el-row>
    </div>
</template>

<script>
import AppLeft from "./modules/appLeft.vue";
import AppItem from "./modules/appItem.vue";
import AppHead from "./modules/appHead.vue";
import AppRight from "./modules/appRight.vue";
import TreatmentAppointmentBatch from '@/views/treatmentAppointmentBatch';
export default {
    name: "treatmentAppointment",
    components: { AppLeft, AppItem, AppHead, AppRight, TreatmentAppointmentBatch },
    data() {
        return {
            activeRow: null,
            activeRow2: null,
            checkList: [],
            count: [],
            str: "",
            selectKeys: []
        };
    },
    methods: {
        setSelectKeys(list = []) {
            this.selectKeys = list
        },
        changeCurrentRow(val) {
            this.activeRow = val;
            setTimeout(() => {
                this.$refs.appLeft.setSelectTableRow(val)
            }, 50);
        },
        changeCurrentRow2(val) {
            console.log(val, "val高压项目");
            this.setSelectKeys = [];
            this.activeRow2 = val;
            setTimeout(() => {
                this.$refs.appItem.setSelectTableRow(val)
            }, 50);
        },
        changeForm(val) {
            this.$refs.appLeft.setAllList(val)
        },
        getCheckList(str) {
            this.str = str;
            this.checkList = this.$refs.appLeft.crud.selections;
            this.count = [...this.checkList, this.checkList.length + 1];
        },
        changeItemList(val) {
            this.$refs.appItem.searchItem(val)
        }
    },
};
</script>

<style lang="scss" scoped>
.AppLeft {
    height: calc(100%+15px);
}

.AppItem {
    height: 50%;
    margin-bottom: 15px;
}

.AppRight {
    height: 47%;
}
</style>
